{extend name="public/base" /}
{block name="css"}
<style>

  .container-fluid {

  }

  .mx-auto {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .banner {
    width: 100%;
  }

  #act-name, #act-mobile {
    border: 1px solid #ED5C32;
    background: #FFFFFF; padding-left: 28px; font-size: 18px;
    border-radius: 25px;
  }

  #act-name::placeholder, #act-mobile::placeholder {
    font-size: 18px;
  }

  #act-order {
    width: 300px;height: 50px;border: 0;
    color: #FFFFFF; font-size: 18px; letter-spacing: 2px;
    background: #ED5C32;
    border-radius: 25px;
  }

  #act-order:active {
    opacity: .8;
  }

</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <!-- banner -->
  <img alt="" class="banner" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/banner_pc_15.jpg">
  <!-- banner end -->

  <div class="row">
    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_02.jpg">
    </div>
    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_03.jpg">
    </div>

    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_04.jpg">
    </div>

    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_05.jpg">
    </div>

    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_06.jpg">
    </div>

    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_07.jpg">
    </div>

    <div class="max-width mx-auto">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_08.jpg">
    </div>

    <div class="max-width mx-auto" style="margin-bottom: 55px">
      <img alt="" class="img-responsive" src="https://res.bestyoujia.com/web/ZMYJ/activities/act202103/pc/315活动pc-美居_09.jpg">
      <div style="width: 1100px; margin-top: -340px; padding: 30px;
border: 1px solid #FFDDBB; display: flex; flex-direction: column; align-items: center;
border-radius: 10px;">
        <div style="letter-spacing: 2px;
font-size: 30px;
font-weight: 500;
color: #FFFFFF;">报名抢占活动名额&nbsp;&nbsp;享线上特惠</div>
        <div style="margin-top: 30px">
          <input id="act-name" placeholder="您的姓名" style="width: 200px;height: 50px;">
          <input id="act-mobile" placeholder="联系方式" style="width: 300px;height: 50px; margin: 0 20px">
          <button id="act-order">立即预约</button>
        </div>
      </div>
      <div style="color: #ffffff; text-align: center; margin-top: 50px">* 本次活动所有礼品不兑换现金，不找零<br>
        * 本次活动最终解释权归优家集团所有</div>
    </div>
  </div>
</section>
{/block}
{block name="js"}
<script>
  $('#act-order').on('click', function () {
    window.page_position = '315活动页报名';

    const customer = $('#act-name').val() || '';
    const mobile = $('#act-mobile').val();

    const mobileStatus = validMobile(mobile);

    switch (mobileStatus) {
      case 1:
        layer.msg('预约中，请稍候...', {
          icon: 16
          ,shade: 0.01
        });

        const data = {
          mobile,
          customer,
        };

        doAppointment(
          data,
          function(res) {
            console.log('onAppointmentSuccess', res);
            const { data = '' } = res;
            if (data) {
              buryingPoint('APPOINTMENT', data);
              layer.closeAll();
              showToast('预约成功', 'success');
              $('#act-name').val('');
              $('#act-mobile').val('');
            }
          },
          function(err) {
            console.log('onAppointmentError', err);
            layer.closeAll();
            showToast('抱歉，预约失败～', 'fail');
            $('#act-name').val('');
            $('#act-mobile').val('');
          }
        );
        break;
      case 2:
        showToast('手机号码格式不正确', 'fail');
        break;
      case 3:
        showToast('联系方式不能为空', 'fail');
        break;
    }
  });
</script>
{/block}